<template>
  <div>
    <Snackbars :value="isNotice" :text="text"/>
  <v-card
      class="mx-auto"
      :color="index % 2 === 0 ? '#80cbc4' : '#607d8b'"
      dark
  >
    <v-card-title>
      <v-icon
          left
          small
      >
        mdi-message-text
      </v-icon>
      <div style="font-size: 4vw">
        {{time}}
      </div>
    </v-card-title>

    <v-card-text>
      {{this.commentInfo.content}}
    </v-card-text>

    <v-card-actions>
      <v-list-item>
        <v-list-item-avatar size="30" style="margin-right: 2vw">
          <v-img
              :src="this.commentInfo.userInfo.avatar"
          ></v-img>
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title style="font-size: 3.5vw">{{this.commentInfo.userInfo.userName}}</v-list-item-title>
        </v-list-item-content>
        <div @click="handleLike">
          <v-icon class="mr-1" v-if="isLike !== -1">
            mdi-heart
          </v-icon>
          <v-icon class="mr-1" v-else>
            mdi-heart-outline
          </v-icon>
          <span>{{this.commentInfo.countLike.length}}</span>
        </div>
      </v-list-item>
    </v-card-actions>
  </v-card>
  </div>
</template>

<script>
import Vue from 'vue'
import * as moment from 'moment'
import 'moment/locale/pt-br';
import Snackbars from "@/components/Snackbars";
export default Vue.extend({
  name: "CommentCard",
  data: () => ({
    text: '',
    isNotice: false
  }),
  components: {
    Snackbars
  },
  props: ["commentInfo","index"],
  computed: {
    time(){
      moment.locale('zh-cn')
      const msgTime = moment(this.commentInfo.atime).format()
      return moment(msgTime).from()
    },
    isLike(){
      return this.commentInfo.countLike.findIndex(item => item === this.$store.state.user.userId)
    }
  },
  methods: {
    handleLike(){
      if(this.$store.state.user.userId){
        if(this.isLike === -1){
          this.$store.dispatch('comment/userAddLike',this.commentInfo.aId)
        }else{
          this.$store.dispatch('comment/userDisLike',this.commentInfo.aId)
        }
      }else{
        this.text = '请先登录后再操作'
        this.isNotice = true
        setTimeout(() => {
          this.isNotice = false
          this.text = ''
        },2000)
      }
    }
  },

})
</script>

<style scoped>

</style>